<template>
  <div>
    <div id="swiper" class="simple-swiper-container">
      <a id="prev" class="btn btn-prev"></a>
      <a id="next" class="btn btn-next"></a>
      <div class="pagination"></div>
    </div>
  </div>
</template>

<script>
import SimSwiper from "../../assets/simpleSwiper/simle";
export default {
  data() {
    return {
      data: [
        {
          index: 0,
          href: "#",
          src: "https://ilce.alicdn.com/montage/126795-3f33862ffd4c90bdd560db3907ad5679.jpg?content=%7B%2211%22%3A%7B%22attrs%22%3A%7B%22height%22%3A%22400.0%22%2C%22mini%22%3Afalse%2C%22transform%22%3A%22%22%2C%22value%22%3A%22TB1q4vpsBr0gK0jSZFnXXbRRXXa_200x200.jpg%22%2C%22width%22%3A%22600.0%22%2C%22x%22%3A%220.0%22%2C%22y%22%3A%220.0%22%7D%2C%22filters%22%3A%5B%7B%22attrs%22%3A%7B%22radius%22%3A%222%22%2C%22rect%22%3A%5B0%2C0%2C200%2C200%5D%7D%2C%22type%22%3A%22gaussian_blur%22%7D%2C%7B%22attrs%22%3A%7B%22dst_rect%22%3A%5B0%2C0%2C600%2C400%5D%2C%22src_rect%22%3A%5B0%2C33%2C200%2C133%5D%7D%2C%22type%22%3A%22copy%22%7D%2C%7B%22attrs%22%3A%7B%22fill%22%3A%22%2366666619%22%2C%22rect%22%3A%5B0%2C0%2C600%2C400%5D%7D%2C%22type%22%3A%22mask%22%7D%5D%7D%2C%2219%22%3A%7B%22attrs%22%3A%7B%22height%22%3A%22334.0%22%2C%22mini%22%3Afalse%2C%22transform%22%3A%22%22%2C%22value%22%3A%22TB1q4vpsBr0gK0jSZFnXXbRRXXa_400x400.jpg%22%2C%22width%22%3A%22335.0%22%2C%22x%22%3A%22258.0%22%2C%22y%22%3A%2233.0%22%7D%2C%22filters%22%3A%5B%7B%22attrs%22%3A%7B%22dst_rect%22%3A%5B0%2C0%2C335%2C334%5D%2C%22src_rect%22%3A%5B0%2C1%2C400%2C399%5D%7D%2C%22type%22%3A%22copy%22%7D%5D%7D%2C%2237%22%3A%7B%22attrs%22%3A%7B%22value%22%3A%22%5Cu5e06%5Cu5e03%5Cu978b%5Cu8fd0%5Cu52a8%5Cu7ef3%5Cu5b50%22%7D%7D%2C%2240%22%3A%7B%22attrs%22%3A%7B%22value%22%3A%22%5Cu5e06%5Cu5e03%5Cu978b%5Cu8fd0%5Cu52a8%5Cu7ef3%5Cu5b50%22%7D%7D%7D&pid=111025_0009&channel=4&getAvatar=avatar",
        },
        {
          index: 1,
          href: "#",
          src: "https://img12.360buyimg.com/babel/s590x470_jfs/t1/215552/35/479/85735/61695a53Ee907dda1/38a0df5bd21e7bfb.png.webp",
        },
        {
          index: 2,
          href: "#",
          src: "https://gtms03.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg",
        },
      ],
    };
  },
  mounted() {
    // 初始化
    let data = this.data;
    new SimSwiper("#swiper", {
      data: data,
      autoplay: 3000,
      lazy: {
        attr: "orgin",
      },
      button: {
        prev: "#prev", // 前进后退按钮
        next: "#next",
      },
      init:(event)=>{
        // 轮播图初始化完成
      },
      change:(event)=>{
        // 轮播图改变
      },
      pagination: {
        el: ".pagination",
        click: true, // 是否可以点击
      },
    });
  }
};
</script>

<style  lang="scss">
@import url("../../assets/simpleSwiper/simple.css");
$color: red;
$full: 100%;
p {
  color: $color;
}
#swiper-demo {
  width: 520px;
  height: 280px;
  overflow: hidden;
  position: relative;
}
img {
  width: $full;
  height: $full;
}
</style>